<template>
  <div class="upLoadImgBox">
    <draggable
      v-model="imgList"
      :disabled="!draggabled ? true : false"
      animation="100"
      @start="onStart"
      @end="onEnd"
    >
      <transition-group>
        <div :class="['img',{'drag_img':draggabled}]" v-for="(item, index) in imgList" :key="index">
          <!--      @dragstart="onDragStart"-->
          <!--      @dragover="onDragOver"-->
          <!--      @dragend="onDragEnd"-->
          <!--      ref="parentNode"-->

          <div class="video" v-if="item.type=='视频'">
            <video :src="item.url" />
            <Icon type="logo-youtube" />
          </div>
          <img :src="domain1+item.url" preview="1" preview-text="图片名称" draggable="true" v-else />

          <template v-if="!forbid">
            <div
              class="close"
              size="30"
              @click.prevent="deleteImg(index, item.type)"
              v-if="draggabled"
            >
              <Icon type="md-close-circle" />
            </div>
            <button class="remove" @click.prevent="deleteImg(index, item.type)" v-else>删除</button>
          </template>
        </div>
      </transition-group>
    </draggable>
    <Upload
      :before-upload="upload"
      :multiple="multiple"
      :show-upload-list="false"
      style="float: left"
      :disabled="forbid ? forbid : disabled"
      action
    >
      <div class="camera" v-if="imgList.length < limit || !limit">
        <Icon type="ios-camera" size="20" style></Icon>
      </div>
    </Upload>
     <!-- <div className="section-pushInChannel-fileInput">
        <input id="file" @change="upload" type="file"  name="file" multiple="multiple"></input>
        <div className="fileTip"></div>
    </div> -->
  </div>
</template>

<script>
import draggable from "vuedraggable";
import { uploadFile } from "../api/file";
export default {
  name: "uploadImg",
  components: {
    draggable
  },
  data() {
    return {
      checkImgVisible: false,
      imgList: [], // 已上传图片的arr
      mediaList: [],
      multiple: true,
      disabled: false,
      draging: ""
    };
  },

  /**
   * @param forbid 为true时,无法对图片进行删除
   * @param draggabled 为true时,可以对图片进行拖拽
   */
  props: ["limit", "imgs", "forbid", "draggabled"],
  methods: {
    upload(file) {
      const that = this;
      this.disabled = true;
      var formData = new FormData();
      formData.append("file", file);
      // console.log('formData',file, "formData");
      uploadFile(formData).then(res => {
        if (this.limit > that.imgList.length) {
          // const { url, type } = res.data;
          that.imgList.push({ url:this.domain+res.data[0], type:'图片' });
          // that.$previewRefresh();
          // this.$emit("uploadImg", JSON.stringify(that.createUrl()));

          that.emitCallback("uploadImg", true);
        }
      });
      this.disabled = false;
    },
    deleteImg(index, type) {
      this.$Modal.confirm({
        title: "警告",
        content: `确定要删除该${type}？`,
        onOk: () => {
          this.imgList.splice(index, 1);
          //if (this.limit == 1) {
          this.emitCallback("getImgUrl");
          // } else {
          // }
        },
        onCancel: () => {}
      });
    },
    changeImgVisible(e) {
      this.checkImgVisible = e;
    },
    //获取选中的图片
    getImgUrl(e) {
      this.imgList = this.imgList.concat(e);
      this.imgList.splice(this.limit, this.imgList.length);
      this.emitCallback("getImgUrl");
    },
    createUrl() {
      const _tmp = [];
      this.imgList.map(item => {
        const url = item.type == "视频" ? `${item.url}#${item.type}` : item.url;
        _tmp.push(url);
      });
      console.log("createUrl=", _tmp);
      return _tmp;
    },
    //开始拖拽
    onStart() {
      console.log("drag start ....");
      console.log(this.imgList);
    },
    onEnd(e) {
      console.log("drag end ....");
      this.emitCallback("getImgUrl");
    },
    //
    emitCallback(method, isStringify) {
      const val = isStringify
        ? JSON.stringify(this.createUrl())
        : this.createUrl();
      this.$emit(method, val);
    }
  },
  mounted() {},
  watch: {
    imgs: {
      handler(data, oldName) {
        if (!data) return (this.imgList = []);
        // console.log('data=', data)
        // console.log(typeof data)
        let arr = Array.isArray(data) ? data : [data];
        // console.log('arr=', arr)
        const _tmp = [];
        arr.map(item => {
          if (typeof item == "string") {
            if (item.indexOf("#") != -1) {
              const [url, type] = item.split("#");
              _tmp.push({ url, type });
            } else {
              _tmp.push({ url: item, type: "图片" });
            }
          } else {
            _tmp.push(item);
          }
        });

        this.imgList = _tmp;
      },
      immediate: true
    }
  }
};
</script>

<style scoped>
.upLoadImgBox {
  height: 58px;
}
.img {
  margin-bottom: 5px;
  width: 58px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  border: 1px #ddd solid;
  float: left;
  margin-right: 10px;
  position: relative;
  overflow: hidden;
}
.img.drag_img {
  overflow: visible;
  cursor: move;
}

.img:hover button {
  bottom: 0;
}

img,
.video {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
}
.video {
  display: flex;
  justify-content: center;
  align-items: center;
}
.video video {
  width: 100%;
  height: 100%;
}
.video .ivu-icon {
  position: absolute;
  color: #fff;
}

.remove {
  position: absolute;
  bottom: -20px;
  left: 0;
  height: 20px;
  width: 100%;
  background: rgba(0, 0, 0, 0.7);
  color: red;
  font-size: 12px;
  padding: 0;
  line-height: 20px;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.camera {
  width: 58px;
  float: left;
  height: 58px;
  line-height: 58px;
  text-align: center;
  border: 1px #ddd solid;
  cursor: pointer;
}

.imgBox {
  float: left;
  height: 30px;
  margin-left: 10px;
  margin-top: 14px;
}

.close {
  position: absolute;
  right: -5px;
  top: -5px;
  display: flex;
  cursor: pointer;
}
</style>
